<template>
    <div class="app-container">
        <div style="text-align:right;padding-bottom: 10px">
            <el-button type="primary" @click="$router.push('/object/store/add')">添加</el-button>
        </div>
        <el-table :key="tableKey" v-loading="listLoading" :data="store_list" border fit highlight-current-row style="width: 100%" @sort-change="sortChange">
            <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
                <template slot-scope="{ row }">
                    <span>{{ row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column label="排序" prop="order_index" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
                <template slot-scope="{ row }">
                    <el-input v-model="row.order_index" @change="orderIndexChange($event, row)" />
                </template>
            </el-table-column>
            <el-table-column :label="$t('缩略图')" prop="name" align="center" width="80px">
                <template slot-scope="{ row }">
                    <img class="img-thumb" :src="asset(row.img_thumb)">
                </template>
            </el-table-column>
            <el-table-column :label="$t('名称')" prop="name" align="center" width="150" :class-name="getSortClass('name')">
                <template slot-scope="{ row }">
                    <span>{{ row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('状态')" prop="status" align="center" width="80">
                <template slot-scope="{ row }">
                    <span>{{ row.status == '1' ? '上架' : '下架' }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
                <template slot-scope="{ row, $index }">
                    <el-button size="mini" type="primary" @click="handleUpdate(row, $index)">
                        {{ $t("编辑") }}
                    </el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(row, $index)">
                        {{ $t("table.delete") }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </div>
</template>

<script>
import store from '@/store/index'
import { asset } from '@/utils/url'
import { queryList, deleteStore, setOrder } from '@/shop/api/store'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
    components: { Pagination },
    data() {
        return {
            alias: {
                store: store.state.conf.alias.store
            },
            store_list: [],
            total: 0,
            tableKey: 0,
            listLoading: true,
            listQuery: {
                page: 1,
                limit: 20,
                importance: undefined,
                title: undefined,
                type: undefined,
                sort: '+id'
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        orderIndexChange(e, row) {
            setOrder({
                store_id: row.id,
                order_index: e
            }).then(res => {
                if (res.errorCode == 200) {
                    this.$message({
                        message: '设置排序成功',
                        type: 'success'
                    })
                }
            })
        },
        asset(path) {
            return asset(path)
        },
        getList() {
            this.listLoading = true
            queryList().then(res => {
                this.store_list = res.data.items
                this.listLoading = false
            })
        },
        getSortClass(key) {
            const sort = this.listQuery.sort
            return sort === `+${key}` ? 'ascending' : 'descending'
        },
        sortChange(data) {
            const { prop, order } = data
            if (prop === 'id') {
                this.sortByID(order)
            }
        },
        handleUpdate(row, index) {
            this.$router.push('/object/store/edit?id=' + row.id)
        },
        handleDelete(row, index) {
            this.$alert('确认删除' + this.alias.store + '！', {
                confirmButtonText: '确定',
                callback: action => {
                    if (action == 'confirm') {
                        deleteStore({ id: this.store_list[index].id }).then(() => {
                            // this.list.unshift(this.temp);
                            // this.dialogFormVisible = false;
                            this.$notify({
                                title: '成功',
                                message: '删除成功',
                                type: 'success',
                                duration: 2000
                            })
                            this.store_list.splice(index, 1)
                        })
                    }
                }
            })
        }
    }
}
</script>

<style>
.img-thumb {
    width: 30px;
    height: 30px;
}
</style>
